<template>
  <div id="father" style="height: 100%">

    <svg style="position:absolute;height:0;clip:rect(0 0 0 0);">
      <defs>
        <filter id="filter-ripple">
          <feImage ref="" xmlns:xlink="http://www.w3.org/1999/xlink"
                   xlink:href=""
                   x="0" y="0" width="0" height="0" result="ripple"></feImage>
          <feDisplacementMap xChannelSelector="G" yChannelSelector="R" color-interpolation-filters="sRGB"
                             in="SourceGraphic" in2="ripple" scale="30"></feDisplacementMap>
          <feComposite operator="in" in2="ripple"></feComposite>
          <feComposite in2="SourceGraphic"></feComposite>
        </filter>
        <!--<image x="0" y="0" width="1000" height="1000" xlink:href="./test.png"></image>-->
      </defs>
    </svg>
      <div class="test" style="height: 100%" :style="{filter: isClicked?'url(#filter-ripple)':''}"
           @touchmove="touchmove"
           @mousemove="mouseMove" @mousedown="mouseDown">

    </div>
  </div>
</template>
<style scoped lang="less">

  .test {
    background: url('test.png') ;
  }

</style>
<script>
  export default{
    mounted() {
      let item = document.querySelector('#filter-ripple');
      let feImage = item.querySelector('feImage');
      this.loop();
    },
    data() {
      return {
        itemArr: [],
        isClicked: false,
        x: 0,
        y: 0,
        height: 0,
        width: 0,
        count: 0,
      }
    },
    methods: {
      touchmove(){
        console.log(arguments);
      },
      mouseMove(e){
//        console.log(e.clientX, e.clientY);
      },
      loop() {
        this.updateAnimation();
        window.requestAnimationFrame(this.loop);
      },
      updateAnimation(){
        let item = document.querySelector('#filter-ripple');
//        let feImage = item.querySelector('feImage');
        let feImage = item.querySelector('feImage');
        let feDisplacementMap = item.querySelector('feDisplacementMap');
        if (parseFloat(feImage.getAttribute('height')) < 250 ) {
            feImage.setAttribute('x', String(this.x - parseFloat(feImage.getAttribute('height')/2)));
            feImage.setAttribute('y', String(this.y - parseFloat(feImage.getAttribute('height')/2)));
            feImage.setAttribute('width', String(parseFloat(feImage.getAttribute('height')) + 1));
            feImage.setAttribute('height', String(parseFloat(feImage.getAttribute('height')) + 1));

        }
        if(parseFloat(feDisplacementMap.getAttribute('scale'))>0)
          feDisplacementMap.setAttribute('scale', String(parseFloat(feDisplacementMap.getAttribute('scale')) - 0.12));
      },
      initAttribute(){
        let item = document.querySelector('#filter-ripple');
        let feImage = item.querySelector('feImage');
        let feDisplacementMap = item.querySelector('feDisplacementMap');
        feImage.setAttribute('x', '0');
        feImage.setAttribute('y', '0');
        feImage.setAttribute('width', '0');
        feImage.setAttribute('height', '0');
        feDisplacementMap.setAttribute('scale', '30');
      },
      mouseDown(e){
        this.initAttribute();
        this.isClicked = true
        this.x = e.clientX;
        this.y = e.clientY;
      }
    }
  }
</script>
